<template>
	<div>
		<div class="heasdd">
			<div class="JJvY17nDVfe7Tlj0VSrP"  @click="back" v-if="isShow">
				<div class="back_icon_box">
					<i class="back_icons">
						<svg viewBox="0 0 20.413 12.425" width="1.5em"height="1.5em" fill="currentColor" aria-hidden="true" focusable="false">
							<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
						</svg>
					</i>
				</div>
				{{$t('h_headerPcTow.title1')}}
			</div>
			<div class="vfM4gIQK4xFYOrN">
				<div class="vfM4gIQK4xFYOroxyXEN">
					<img src="../../src/assets/images/yh/xianzuo.png" alt=""class="goDRiiBsuEuXD3W1NphN">
					<span>{{ title }}</span>
					<img src="../../src/assets/images/yh/xianyou.png" alt="" class="goDRiiBsuEuXD3W1NphNreght">
				</div>
				<p style="font-size: 14px;color: var(--theme-text-color-lighten);">{{conTitle}}</p>
			</div>
			<div class="ratat" v-if="isShowTowBut">
				<div class="dshfua">
					{{$t('h_headerPcTow.title2')}}
				</div>
				<div class="afrsgr">
					{{$t('h_headerPcTow.title3')}}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		components:{
			
		},
		data() {
			return {
				
			}
		},
		props: {
			conTitle: { type: String, default: ''},
			title: { type: String, default: ''},
			backCount: { type: Number, default: -1 },
			isShow: { type: Boolean, default:false},
			isShowTowBut: { type: Boolean, default:false}
		},
		mounted() {
		},
		methods:{
			back(){
				this.$router.go(this.backCount)
			}
			}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.heasdd{
		position: relative;
		width: 100%;
		margin: 20px 0 0;
		align-items: center;
		    background-color: var(--theme-main-bg-color);
		    border-radius: 5px;
		    box-shadow: 0 0.03rem 0.09rem 0 rgb(0 0 0 / 6%);
		    display: flex;
		   padding: 10px 0px;
		   justify-content: center;
		   box-sizing: border-box;
	}
	.JJvY17nDVfe7Tlj0VSrP {
	    width: 2.3rem;
	color: var(--theme-text-color);
	    font-size: 14px;
		display: flex;
		cursor: pointer;
		align-items: center;
		position: absolute;top: 50%;
		transform: translateY(-50%);
		left: 15px;
	}
	
	.ratat{
		position: absolute;
		right: 15px;
		display: flex;
		align-items: center;
		top: 50%;
		transform: translateY(-50%);
	}
	
	.dshfua{
		width: 71px;
		height: 28px;
		cursor: pointer;
		border-radius: 5px;
		text-align: center;
		font-size: 13px;
		color: #fff;
		line-height: 28px;
		background-color: var(--theme-disabled-bg-color);
	}
	.afrsgr{
		width: 71px;
		height: 28px;
		cursor: pointer;
		border-radius: 5px;
		text-align: center;
		font-size: 13px;
		color: #fff;
		line-height: 28px;
		background-color: var(--theme-primary-color);
		margin-left: 10px;
	}
	.back_icon_box{
		margin-top: 4px;
	}
	.JJvY17nDVfe7Tlj0VSrP span {
	    margin-left: 0.08rem;
	}
	.vfM4gIQK4xFYOrN{
		align-items: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.vfM4gIQK4xFYOroxyXEN {
	    align-items: center;
	    display: flex;
		justify-content: center;
	    flex: 2;
		font-size: 18px;
	}
	.goDRiiBsuEuXD3W1NphN {
	    opacity: 1;
	    -webkit-transform: scale(1);
	    transform: scale(1);
		   width: 50px;
		   height: 6px;
		    transform: rotate(180deg);
	}
	.goDRiiBsuEuXD3W1NphNreght {
	       width: 50px;
	       height: 6px;
	       opacity: 1;
	       -webkit-transform: scale(1);
	       transform: scale(1);
	}
	.vfM4gIQK4xFYOroxyXEN>span {
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    color: var(--theme-text-color-darken);
	    display: -webkit-box;
	    font-size: 17px;
	    margin: 0px 5px 0;
	    overflow: hidden;
	    text-align: center;
	    text-overflow: ellipsis;
	    vertical-align: middle;
	}
	
</style>